<template>
	<view class="active-list">
		<view class="search-box">
			<wd-input v-model="searachInput" />
		</view>
		<scroll-view class="active-container" scroll-y>
			<view class="active-box" v-for="item in showData" :key="item.id">
				<view class="active-img" @click="goPersonDetail(item)">
					<wd-img v-if="item.coverImage" width="300" height="100" :src="item.coverImage"></wd-img>
					<view v-else class="default-img">未设置图片</view>
				</view>
				<view class="active-info">
					<view class="active-info-title">{{ item.content }}</view>
					<view class="active-time">
						{{ `活动时间${item.activityStartTime}-${item.activityEndTime}` }}
					</view>
					<view class="active-stauts">
						<text v-if="item.activityStatus === 0" class="status-canceled">已取消</text>
						<text v-else-if="item.activityStatus === 1" class="status-not-started">未开始</text>
						<text v-else-if="item.activityStatus === 2" class="status-ongoing">进行中</text>
						<text v-else-if="item.activityStatus === 3" class="status-ended">已结束</text>
						<text v-else class="status-unknown">未知状态</text>
						<view>已报名{{ item.signupCount || 0 }}人</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		http
	} from '@/utils/http'
	import {
		useToast,
		useMessage,
		useNotify,
		dayjs
	} from 'wot-design-uni'
	import {
		ref
	} from 'vue'
	import {
		onLaunch,
		onShow,
		onHide,
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import { tabStore } from '@/store/activity.ts';
	const tbStore = tabStore()
	// 状态管理
	const {
		setActivityTab,
		tabObject
	} = tbStore
	
	const routeParams = ref({})
	onLoad((options) => {
		routeParams.value = options
	})
	const showData = ref([])
	const searachInput = ref('')
	// 初始化toast
	const toast = useToast()
	const initData = () => {
		http.get('/chamber/ccActivity/queryByTimeRange', {}).then((res) => {
			if (res.success) {
				showData.value = res.result
			}
		})
	}
	onShow(() => {
		initData()
	})
	const goPersonDetail = (item) => {
		uni.navigateTo({
			url: '/pages/activity/activityDetail?id=' + item.id,
		})
	}
</script>

<style lang="scss" scoped>
	.active-list {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding: 0 10px;
	}

	.search-box {
		padding: 10px 0;
	}

	.active-container {
		flex: 1;
		overflow: hidden;
	}

	.active-box {
		display: flex;
		background-color: white;
		margin-bottom: 20px;
		padding: 15px;
		border-radius: 8px;
		flex-direction: column;
	}

	.active-img {
		width: 100px;
		height: 100px;
		margin-right: 15px;
	}

	// .active-info {
	// 	flex: 1;

	// 	>view {
	// 		margin-bottom: 8px;

	// 		&:last-child {
	// 			margin-bottom: 0;
	// 		}
	// 	}

	.active-info-title {
		font-weight: bold;
		font-size: 18px;
	}

	.active-time {
		font-size: 12px;
		color: #333;
	}

	.active-stauts {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.default-img {
		width: 100px;
		height: 100px;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
	}

	/* 可在此添加组件样式 */
	/* 容器设置为flex布局，让子元素水平排列 */
	.button-container {
		display: flex;
		/* 启用flex布局 */
		width: 100%;
		/* 占满整行宽度 */
		gap: 20rpx;
		/* 两个按钮之间的间距 */
		padding: 20rpx;
		/* 容器内边距，可选 */
		box-sizing: border-box;
		/* 确保padding不影响总宽度 */
	}

	/* 按钮样式 */
	.btn {
		flex: 1;
		/* 关键：两个按钮平均分配剩余空间 */
		height: 80rpx;
		/* 按钮高度 */
		line-height: 80rpx;
		/* 文字垂直居中 */
		font-size: 30rpx;
		/* 文字大小 */
		/* 其他样式可根据需求调整 */
	}

	.status-canceled {
		color: #999;
	}

	/* 已取消：灰色 */
	.status-not-started {
		color: #007aff;
	}

	/* 未开始：蓝色 */
	.status-ongoing {
		color: #07c160;
	}

	/* 进行中：绿色 */
	.status-ended {
		color: #ff4d4f;
	}

	/* 已结束：红色 */
	.status-unknown {
		color: #ff9800;
	}

	/* 未知状态：橙色 */
</style>